// ==========================================================================
// $Effeckt Captions

// @dependencies
// js/libs/jquery-2.0.3.min.js
// js/modules/captions.js
// ==========================================================================


$effeckt-caption-transition-duration: 500ms !default;


/*

Captions Markup Pattern & Explanation

data-effeckt-type = 
"<quarter-appear | quarter-slide-up | quarter-slide-side | quarter-fall-in |
quarter-two-step | quarter-zoom | cover-fade | cover-push-right | revolving-door-left |
revolving-door-right | revolving-door-top | revolving-door-bottom | cover-slide-top |
offset | guillotine-reverse | half-slide | sqkwoosh | tunnel>"

<figure class="effeckt-caption" data-effeckt-type="">
  <img src="" alt="">
  <figcaption>
    <div class="effeckt-figcaption-wrap"></div>
  </figcaption>
</figure>

*/



// ==========================================================================
// Styles
// ==========================================================================

.effeckt-caption {
  position: relative;

  img {
    transition: $effeckt-caption-transition-duration;
  }

  figcaption {
    position: absolute;
    transition: $effeckt-caption-transition-duration;
    width: 100%;
  }


  // Effect 1: Appear
  &[data-effeckt-type="quarter-appear"] {
    figcaption {
      bottom: 0;
      left: 0;
      opacity: 0;
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        opacity: 1;
      }
    }
  }


  // Effect 2: Quarter Slide Up
  &[data-effeckt-type="quarter-slide-up"] {
    figcaption {
      bottom: 0;
      left: 0;
      opacity: 0;
      transform: translateY(100%);
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }


  // Effect 3: Sqwoosh
  &[data-effeckt-type="sqkwoosh"] {
    figcaption {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: none;
      z-index: 0;
    }

    img {
      position: relative;
      z-index: 1;
      transition-delay: 0.25s;
    }

    .effeckt-figcaption-wrap {
      position: absolute;
      bottom: 1rem;
      opacity: 0;
      transition: opacity 0.25s linear 0s;
    }

    &:hover,
    &:active,
    &.active {
      .effeckt-figcaption-wrap {
        opacity: 1;
        transition-delay: 0.25s;
      }

      img {
        transform: scale(0.5) translateY(-80px);
        transition-delay: 0;
      }
    }
  }


  // Effect 4: Quarter Slide Side
  &[data-effeckt-type="quarter-slide-side"] {
    figcaption {
      left: 0;
      bottom: 0;
      opacity: 0;
      transform: translateX(100%);
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }


  // Effect 5: Cover Fade
  &[data-effeckt-type="cover-fade"] {
    figcaption {
      top: 0;
      left: 0;
      height: 100%;
      opacity: 0;
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        opacity: 1;
      }
    }
  }


  // Effect 6 - Quarter Fall in
  &[data-effeckt-type="quarter-fall-in"] {
    figcaption {
      top: 0;
      left: 0;
      transform: translateX(100%) rotate(20deg);
      opacity: 0;
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
      }
    }
  }


  // Effect 7 - 3Quarter Two Step
  &[data-effeckt-type="quarter-two-step"] {
    figcaption {
      top: 0;
      left: 0;
      transform: translateX(-100%);
      opacity: 0;
      z-index: 2;
    }

    .effeckt-figcaption-wrap {
      transition: $effeckt-caption-transition-duration $effeckt-caption-transition-duration/2;
      transform: translateX(200%);
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        transform: translateX(0);
        opacity: 1;
      }

      .effeckt-figcaption-wrap {
        transform: translateX(0);
      }
    }
  }


  // Effect 8 - Cover Push Right
  &[data-effeckt-type="cover-push-right"] {
    figcaption {
      top: 0;
      left: 0;
      height: 100%;
      transform: translateX(-100%);
      opacity: 0;
    }

    img {
      transition: $effeckt-caption-transition-duration;
      transform: translateX(0);
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        transform: translateX(0);
        opacity: 1;
      }

      img {
        transform: translateX(100%);
      }
    }
  }

  // Effect 15 - Cover Slide Top
  &[data-effeckt-type="cover-slide-top"] {
    figcaption {
      top: 0;
      left: 0;
      height: 100%;
      transform: translateY(-100%);
      opacity: 0;
    }

    img {
      transition: $effeckt-caption-transition-duration;
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }


  // Effect 9 - Quarter Caption Zoom
  &[data-effeckt-type="quarter-zoom"] {
    figcaption {
      top: 0;
      left: 0;
      transform: scale(2);
      text-align: center;
      opacity: 0;
    }

    img {
      transition: $effeckt-caption-transition-duration;
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        transform: scale(1);
        opacity: 1;
      }

      img {
        transform: scale(1.1);
      }
    }
  }


  // Effect 10 - Revolving Door
  &[data-effeckt-type="revolving-door-left"] {
    overflow: visible;
    figcaption {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: perspective(1300px) rotateY(180deg);
      backface-visibility: hidden;
    }

    img {
      transform: perspective(1300px);
      transition: $effeckt-caption-transition-duration;
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        transform: perspective(1300px) rotateY(0deg);
      }

      img {
        transform: perspective(1300px) rotateY(-180deg);
      }
    }
  }


  // Effect 11 - Revolving Door Right
  &[data-effeckt-type="revolving-door-right"] {
    overflow: visible;
    figcaption {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: perspective(1300px) rotateY(180deg);
      backface-visibility: hidden;
    }

    img {
      transform: perspective(1300px);
      transition: $effeckt-caption-transition-duration;
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        transform: perspective(1300px) rotateY(360deg);
      }
      img {
        transform: perspective(1300px) rotateY(180deg);
      }
    }
  }


  // Effect 12 - Revolving Door Top
  &[data-effeckt-type="revolving-door-top"] {
    overflow: visible;
    figcaption {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: perspective(1300px) rotateX(180deg);
      backface-visibility: hidden;
    }

    img {
      transform: perspective(1300px);
      transition: $effeckt-caption-transition-duration;
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        transform: perspective(1300px) rotateX(360deg);
      }

      img {
        transform: perspective(1300px) rotateX(180deg);
      }
    }
  }


  // Effect 13 - Revolving Door Bottom
  &[data-effeckt-type="revolving-door-bottom"] {
    overflow: visible;
    figcaption {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: perspective(1300px) rotateX(180deg);
      backface-visibility: hidden;
    }

    img {
      transform: perspective(1300px);
      transition: $effeckt-caption-transition-duration;
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        transform: perspective(1300px) rotateX(0deg);
      }

      img {
        transform: perspective(1300px) rotateX(-180deg);
      }
    }
  }

  // Effect 14 - Caption Offset
  &[data-effeckt-type="offset"] {
    overflow: visible;
    figcaption {
      top: 0;
      left: 0;
      text-align: center;
      opacity: 0;
      height: 100%;
    }

    img {
      transition: $effeckt-caption-transition-duration;
    }

    &:hover,
    &:active,
    &.active {
      figcaption {
        transform: translate(15px, 15px);
        opacity: 1;
        z-index: 100; //prevent overlap
        overflow: hidden;
      }
    }
  }


  // Effect 15 - Guillotine Reverse / Reveal Up
  &[data-effeckt-type="guillotine-reverse"] {
    overflow: visible;
    figcaption {
      top: 0;
      left: 0;
      text-align: center;
      height: 100%;
    }

    img {
      display: block;
      position:relative;
      z-index:10;
      transition: $effeckt-caption-transition-duration;
    }

    &:hover,
    &:active,
    &.active {
      img {
        transform: translateY(-100%);
      }
    }
  }


  // Effect 16 - Half Slide
  &[data-effeckt-type="half-slide"] {
    figcaption {
      top: 0;
      left: 0;
      text-align: center;
      height: 100%;
      transform: translateY(100%);
    }

    img {
      display: block;
      position:relative;
      transition: $effeckt-caption-transition-duration;
    }

    &:hover,
    &:active,
    &.active {
      img {
        transform: translateY(-50%);
      }

      figcaption {
        transform: translateY(50%);
      }
    }
  }

  // Effect 17 - Tunnel
  &[data-effeckt-type="tunnel"] {
    figcaption {
      top: 0;
      left: 0;
      text-align: center;
      height: 100%;
      opacity: 0;
      transform: scale(0.7);
    }

    img {
      display: block;
      position:relative;
      z-index: 10;
      transition: $effeckt-caption-transition-duration;
    }

    &:hover,
    &:active,
    &.active {
      img {
        transform: scale(0.4);
      }

      figcaption {
        opacity:1;
        transform: scale(1);
      }
    }
  }
}
